 <template name="home">
  <view class="addperson">
    <img src="/static/img/bg.png" alt class="hubg" />
    <view class="login-bg">
      <view class="login-card">
        <!-- 预订人信息 -->
        <!-- <view class="card-item">
					<view class="cu-bar  search">
						<view class="search-form">
							<text class="title" style="padding-right: 60upx;">姓</text>
							<text class="title">名：</text>
							<input
								type="text"
								placeholder="请输入姓名"
								placeholder-style="color:#ccc"
								disabled
								
							/>
						</view>
					</view>
					<view class="cu-bar search">
						<view class="search-form"> 
							<text class="title">手机号码：</text>	
							<input
								type="text"
								placeholder="请输入手机号"
								placeholder-style="color:#ccc"
								disabled
								v-model="user"
							/>
						</view>
					</view>									
        </view>-->

        <!-- 列表卡片 -->
        <view
          v-for="(item, k) in newCohabitantDTOList"
          :key="k"
          class="card-item"
        >
          <view class="cu-bar search">
            <view class="search-form">
              <text class="title" style="padding-right: 60upx">姓</text>
              <text class="title">名：</text>
              <input
                type="text"
                placeholder="请输入姓名"
                placeholder-style="color:#ccc"
                disabled
                v-model="item.cohabitantName"
              />
            </view>
          </view>
          <view class="cu-bar search">
            <view class="search-form">
              <text class="title">手机号码：</text>
              <input
                type="text"
                placeholder="请输入手机号"
                placeholder-style="color:#ccc"
                disabled
                v-model="item.cohabitantPhoneNumber"
              />
            </view>
          </view>

          <image
            src="/static/img/delete.png"
            mode=""
            class="remove-btn"
            v-if="item.orderCustomerType != '87'"
            @click="removePerson(item)"
          />
          <button
            class="shares share-btn"
            open-type="share"
            v-if="item.orderCustomerType != '87'"
          >
            <image
              src="/static/img/share.png"
              mode=""
              class=""
              style="height: 42rpx; width: 42rpx"
            />
          </button>
        </view>
        <!-- 添加的  输入 form -->
        <view class="add-form" v-show="addform">
          <view class="add-item">
            <text class="title" style="padding-right: 60upx">姓</text>
            <text class="title">名：</text>
            <input
              type="text"
              placeholder="请输入姓名"
              v-model="addparam.cohabitantName"
            />
          </view>
          <view class="add-item">
            <text class="title">手机号码：</text>
            <input
              type="text"
              placeholder="请输入手机号"
              v-model="addparam.cohabitantPhoneNumber"
              maxlength="11"
            />
          </view>
          <view class="btn-box">
            <view class="btn enter" @click="enterAdd">确定</view>
            <view class="btn cancel" @click="addshow">取消</view>
          </view>
        </view>
        <!-- 添加的圆按钮 -->
        <view class="addbtn-box" v-show="addbtn && !addform">
          <view class="add-btn" @click="addshow">
            <image src="../../static/img/plus.png" mode />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
 
 <script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "home",
  components: {},
  data() {
    return {
      addform: false, //添加  表单 显
      amapPlugin: null,
      orderinfo: [],
      login: false,
      // {
      // 	cohabitantName: "",
      // 	cohabitantOrderId: "",
      // 	cohabitantPhoneNumber: ""
      // }
      newCohabitantDTOList: [], // 列表数据
      item: "",
      addparam: {
        //添加时的参数
        cohabitantName: "",
        cohabitantOrderId: "",
        cohabitantPhoneNumber: "",
      },
      addbtn: false,
      capacity: 0,
    };
  },
  computed: {
    ...mapState({
      user: "user",
    }),
  },
  onShareAppMessage: function (res) {
    if (res.from === "button") {
    }
    return {
      title: "e秒安心住",
      imageUrl: "/static/img/fenxiang.png",
      path: "pages/addperson/addperson",
      success: function (res) {
        console.log("成功", res);
      },
    };
  },
  onShow() {},
  methods: {
    ...mapMutations({
      setUser: "setUser",
    }),
    addshow() {
      //添加  表单 显示
      if (this.newCohabitantDTOList.length < this.capacity) {
        this.addform = !this.addform;
        this.addbtn = true;
        this.addparam.cohabitantName = "";
        this.addparam.cohabitantPhoneNumber = "";
      } else if (this.newCohabitantDTOList.length < 4) {
        this.addform = !this.addform;
        this.addbtn = true;
        this.addparam.cohabitantName = "";
        this.addparam.cohabitantPhoneNumber = "";
      }
    },
    enterAdd() {
      //确定添加
      if (this.addparam.cohabitantName == "") {
        uni.showToast({
          icon: "none",
          title: "请填写入住人姓名",
          duration: 2000,
        });
        return;
      }
      if (!/^1[3456789]\d{9}$/.test(this.addparam.cohabitantPhoneNumber)) {
        uni.showToast({
          icon: "none",
          title: "请填写正确手机号",
          duration: 2000,
        });
        return;
      }
      if (this.addparam.cohabitantPhoneNumber.length < 11) {
        uni.showToast({
          icon: "none",
          title: "手机号码不完整！",
          duration: 2000,
        });
        return;
      }
      this.addform = false;

      for (let i = 0; i < this.newCohabitantDTOList.length; i++) {
        console.log(this.newCohabitantDTOList[i].cohabitantPhoneNumber);
        if (
          this.newCohabitantDTOList[i].cohabitantPhoneNumber ==
          this.addparam.cohabitantPhoneNumber
        ) {
          uni.showToast({
            icon: "none",
            title: "手机号不能重复！",
            duration: 2000,
          });
          return false;
        }
      }
      let arr = JSON.parse(JSON.stringify(this.newCohabitantDTOList));
      arr.push(this.addparam);
      uni.showLoading({
        title: "提交中",
        mask: true,
      });
      this.$http
        .post(
          "/app/insertCohabitant",
          {
            currentPhone: this.user,
            orderNumber: this.item.orderNumber,
            newCohabitantDTOList: arr,
          },
          {
            header: {
              "Content-Type": "application/json;charset=UTF-8",
            },
            dataType: "json",
            responseType: "text",
          }
        )
        .then((res) => {
          console.log(res);
          uni.hideLoading();
          let data = res.data;
          if (data.code == 0) {
            this.addform = false;
            uni.showToast({
              image: "/static/img/success.png",
              title: "添加成功",
              duration: 2000,
            });

            this.getPerson();
          } else {
            uni.showToast({
              icon: "none",
              title: data.msg,
              duration: 3000,
            });
          }
        })
        .catch((err) => {});
    },
    handleRemove(index) {
      this.newCohabitantDTOList.splice(index, 1);
    },
    getPerson() {
      //获取同住人列表
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      this.$http
        .post(
          "/app/findCohabitant",
          this.$qs.stringify({
            phoneNumber: this.user,
            orderNumber: this.item.orderNumber,
          }),
          {
            header: {},
            dataType: "json",
            responseType: "text",
          }
        )
        .then((res) => {
          uni.hideLoading();
          let data = res.data;

          if (data.code == 0) {
            let arr = data.data.map((item) => {
              return {
                cohabitantName: item.customName,
                cohabitantOrderId: item.orderId,
                cohabitantPhoneNumber: item.customPhoneNumber,
                orderCustomerType: item.orderCustomerType,
              };
            });
            this.newCohabitantDTOList = arr;
            this.capacity = res.data.data[0].capacity;
            if (arr.length < 4) {
              this.addbtn = true;
              this.addform = false;
            } else if (arr.length == this.capacity && arr.length > 4) {
              this.addbtn = false;
              this.addform = false;
            } else if (this.capacity > 4) {
              this.addbtn = true;
              this.addform = false;
            } else {
              this.addbtn = false;
              this.addform = false;
            }
          } else {
            uni.showToast({
              image: "/static/img/warn.png",
              title: data.msg,
              duration: 2000,
              mask: true,
            });
          }
        })
        .catch((err) => {});
    },
    removePerson(row) {
      //删除同住人
      let _that = this;
      uni.showModal({
        title: "提示",
        content: "确定删除同住人吗？",
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: "删除中",
              mask: true,
            });
            this.$http
              .post(
                "/app/deleteCohabitant",
                {
                  currentPhone: this.user,
                  orderSoureNumber: this.item.orderNumber,
                  cohabitantName: row.cohabitantName,
                  cohabitantOrderId: row.cohabitantOrderId,
                  cohabitantPhoneNumber: row.cohabitantPhoneNumber,
                },
                {
                  header: {
                    "Content-Type": "application/json;charset=UTF-8",
                  },
                  dataType: "json",
                  responseType: "text",
                }
              )
              .then((res) => {
                uni.hideLoading();
                console.log(res);
                let data = res.data;
                if (data.code == 0) {
                  uni.showToast({
                    image: "/static/img/success.png",
                    title: "删除成功",
                    duration: 2000,
                  });
                  this.getPerson();
                } else {
                  uni.showToast({
                    image: "/static/img/warn.png",
                    title: data.msg,
                    duration: 2000,
                  });
                }
              })
              .catch((err) => {});
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
  },

  watch: {},
  onLoad(item) {
    console.log(item.item);
    this.item = uni.getStorageSync("person");

    this.getPerson();
  },
};
</script>
 
 <style lang="scss">
.addperson {
  .add {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .jiac {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: white;
    padding-right: 10px;
    margin-right: 5px;
    color: #ff9125;
  }
  .jia {
    height: 10px;
    width: 10px;
    margin-left: 5px;
  }
  .addperson {
    margin-left: 5px;
  }
  .card-item .cu-bar {
    min-height: 94upx;
  }
  .cu-bar .search-form {
    height: 94upx !important;
    line-height: 94upx !important !important;
    background: #f1f6ff;
    margin: 0 84upx 0upx 20upx;
    border-bottom: 1upx solid #fff;
    padding-left: 18upx;
    .title {
      font-size: 32upx;
      color: #000;
    }
    input {
      font-size: 32upx;
      color: #797979;
      text-align: right;
      padding-right: 0upx;
    }
  }
}
.hubg {
  position: fixed;
  top: 0;
  height: 300rpx;
  z-index: -1;
  width: 100%;
}
.content {
  /* height: 400px; */
  /* height:100vh */
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.loginpart {
  flex: 1;
}
.landing {
  height: 84upx;
  line-height: 84upx;
  border-radius: 44upx;
  font-size: 32upx;
  background: #4382ff;
}
.login-btn {
  padding: 10upx 20upx;
  margin-top: 350upx;
}
.login-function {
  overflow: auto;
  padding: 20upx 20upx 30upx 20upx;
}
.login-forget {
  float: left;
  font-size: 26upx;
  color: #999;
}
.login-register {
  color: #666;
  float: right;
  font-size: 26upx;
}
.login-input input {
  background: #f8f8f8;
  font-size: 28upx;
  padding: 10upx 25upx;
  height: 62upx;
  line-height: 62upx;
  border-radius: 8upx;
}
.login-margin-b {
  margin-bottom: 25upx;
}
.login-input {
  padding: 10upx 20upx;
}
.login-head {
  font-size: 46upx;
  text-align: center;
  padding: 25upx 10upx 55upx 10upx;
  display: flex;
  justify-content: center;
}
.login-card {
  background: #fff;
  border-radius: 12upx;
  padding: 36upx 20upx;
  box-shadow: 0 6upx 18upx rgba(0, 0, 0, 0.12);
  position: relative;
}

.login-card .card-item {
  height: 228upx;
  background: #f1f6ff;
  border-radius: 8upx;
  margin-bottom: 28upx;
  position: relative;
}
.login-bg {
  height: 260upx;
  padding: 24upx;
  background: #4382ff;
}
.liji {
  font-size: 24upx;
  color: #787878;
}
.lijil,
.lijir {
  color: #4382ff;
}
.lijir {
  margin-left: 10upx;
}
.blue {
  background: #4382ff !important;
  color: white;
}
.xieyi {
  color: #ff9429;
}
.yiyuedu {
  color: #7c7c7c;
}
.foot {
  justify-content: center;
  align-items: center;
}
.banner {
  width: 100%;
  /* position: absolute; */
  /* bottom: 42px; */
  height: 164upx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffa98a;
}
.hubg {
  position: absolute;
  top: 0;
  height: 300rpx;
  z-index: -1;
  width: 100%;
}
.userAvatarUrl {
  height: 100px;
  width: 100px;
}
.userinfo-avatars {
  overflow: hidden;
  display: block;
  width: 160rpx;
  height: 160rpx;
  margin: 20rpx;
  border: 2px solid #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
.card-item .remove-btn {
  width: 42upx;
  height: 42upx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 2upx 3upx 13upx 0upx rgba(15, 15, 15, 0.19);
  border-radius: 50%;
  position: absolute;
  right: 14upx;
  top: 28upx;
}
.share-btn {
  width: 42upx;
  height: 42upx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 2upx 3upx 13upx 0upx rgba(15, 15, 15, 0.19);
  border-radius: 50%;
  position: absolute;
  right: 14upx;
  top: 128upx;
}
.card-item .remove-btn text {
  display: inline-block;
  border-bottom: 4upx solid #ff3333;
  margin-top: 12upx;
  margin-left: 8upx;
  width: 24upx;
}
.addbtn-box {
  position: relative;
  height: 60upx;
  margin-top: 110upx;
  margin-bottom: 110upx;
}
.addbtn-box .add-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120upx;
  height: 120upx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 3upx 5upx 18upx 0upx rgba(15, 15, 15, 0.19);
  border-radius: 50%;
  text-align: center;
}
.addbtn-box .add-btn image {
  width: 56upx;
  height: 56upx;
  margin-left: 0upx;
  margin-top: 32upx;
}
.add-form .add-item {
  height: 94upx;
  line-height: 94upx;
  display: flex;
  font-size: 32upx;
  color: #000;
  border-bottom: 1upx solid #f5f5f5;
  margin-left: 20upx;
  margin-right: 64upx;
  padding-left: 20upx;
}
.add-form .add-item input {
  line-height: 94upx;
  height: 94upx;
  text-align: right;
  flex: 1 1 auto;
}
.add-form .btn-box {
  overflow: hidden;
  padding-top: 50upx;
  padding-right: 70upx;
}
.add-form .btn-box .btn {
  width: 120upx;
  height: 56upx;
  line-height: 56upx;
  border-radius: 16upx;
  font-size: 28upx;
  text-align: center;
  float: right;
}
.add-form .btn-box .cancel {
  border: 1upx solid rgba(204, 204, 204, 1);
  color: #797979 !important;
  margin-right: 34upx;
}
.add-form .btn-box .enter {
  background: rgba(67, 130, 255, 1);
  color: #fff;
}
.shares {
  position: none;
  margin-left: 0;
  background-color: white;
  border: none;
  padding-left: 0px;
  line-height: inherit;
  padding-right: 0;
}

.shares::after {
  border: none;
}
</style>
 